<template>
  <div>
    <el-form
      ref="mainForm"
      size="medium"
      :model="formData"
      :rules="rules"
      label-width="100px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="作物选择"
            prop="crop_id"
          >
            <el-select
              v-model="formData.crop_id"
              filterable
              clearable
            >
              <el-option
                v-for="(item,index) in crops"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :inline="true"
            label="种植年"
            prop="plant_year"
          >
            <el-date-picker
              v-model="formData.plant_year"
              type="year"
              placeholder="选择年"
              value-format="yyyy"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="当前茬"
            prop="stubble"
          >
            <el-select
              v-model="formData.stubble"
              filterable
              clearable
            >
              <el-option
                v-for="i in 3"
                :key="i"
                :label="i"
                :value="i"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :inline="true"
            label="当茬开始日"
            prop="started_at"
          >
            <el-date-picker
              v-model="formData.started_at"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item
        v-if="formData && formData.fieldAttr && formData.fieldAttr.growthable"
        label="作物生育期"
        prop="descri"
      >
        <el-table
          :data="formData.cropGrowthes"
          stripe
          border
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="id"
            label="序号"
            width="80"
          >
            <template v-slot="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="stage_name"
            label="名称"
            width="140"
          >
            <template v-slot="scope">
              <el-input
                v-model="scope.row.stage_name"
                placeholder="名称"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="phone"
            label="时间范围"
          >
            <template v-slot="scope">
              <el-date-picker
                v-model="scope.row.daterange"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="soil_depth"
            label="计划湿润层深度"
            width="150"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.soil_depth"
                placeholder="计划湿润层深度"
              >
                <template slot="append">cm</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="kc"
            label="kc值"
            width="150"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.kc_start"
                placeholder="kc值"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="wc_min"
            label="灌溉下限"
            width="150"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.wc_min"
                placeholder="灌溉下限"
              >
                <template slot="append">%</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="wc_max"
            label="灌溉上限"
            width="150"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.wc_max"
                placeholder="灌溉上限"
              >
                <template slot="append">%</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="120"
          >
            <template slot="header">
              <el-button
                size="mini"
                type="primary"
                @click="addRow"
              >新增记录</el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                @click="delRow(scope.row,scope.$index)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submit('mainForm')"
        >提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { deepClone } from '@/utils'
export default {
  props: {
    formData: {
      type: Object,
      default() {
        return {
          field_id: '',
          crop_id: '',
          plant_year: '',
          stubble: 1,
          started_at: '',
          cropGrowthes: []
        }
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      rules: {
        crop_id: [
          { required: true, message: '请选择作物', trigger: 'blur' }
        ],
        plant_year: [
          { required: true, message: '请选择种植年', trigger: 'blur' }
        ],
        stubble: [
          { required: true, message: '请选择当前茬', trigger: 'blur' }
        ],
        started_at: [
          { required: true, message: '请选择当茬开始日', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['project', 'crops', 'cropGrowthesStd'])
  },
  watch: {
    'formData.crop_id': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.formData.cropGrowthes.map((val) => {
            val.daterange = [val.stage_start, val.stage_end]
            return val
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    addRow() {
      this.formData.cropGrowthes.push({})
    },
    delRow(row, index) {
      this.formData.cropGrowthes.splice(index, 1)
    },
    submit() {
      this.$refs['mainForm'].validate((valid) => {
        if (valid) {
          const cropGrowthesClone = deepClone(this.formData.cropGrowthes)
          const cropGrowthes = cropGrowthesClone.map((val) => {
            delete val.id
            delete val.project_id
            delete val.crop_id
            delete val.stubble
            val.stage_start = val.daterange[0]
            val.stage_end = val.daterange[1]
            // delete val.daterange
            return val
          })
          const formData = deepClone(this.formData)
          delete formData.cropGrowthes
          formData.cropGrowthes = cropGrowthes
          this.$emit('submit', formData)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getCurrentYear() {
      return new Date().getFullYear().toString()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
